import { addAnno, getAnnoApi, getAnnoTypeApi } from "@/api/anno";
import { baseURL } from "@/api/request";
import { PlusOutlined } from "@ant-design/icons";
import { useRequest } from "ahooks";
import { Button, Form, FormInstance, Input, Select, Upload } from "antd";
import TextArea from "antd/es/input/TextArea";
import React, { useEffect, useState } from "react";
const { Option } = Select;

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};

const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};
const AnnoAdd = () => {
    const formRef = React.useRef<FormInstance>(null);
    const [datas,setDatas] = useState<annoTypeTypes[]>([])
    const getData = useRequest(getAnnoTypeApi,{
        onSuccess:(res)=>{
            console.log(res);
            
            setDatas(res.result)
        }
    })

    // useRequest(getAnnoApi,{
    //     onSuccess:(res)=>{
    //         console.log(res);
    //         setDatas(res.result)
    //     }
    // })
    const addData = useRequest(addAnno,{
        manual:true,
        onSuccess:(res)=>{
            console.log(res);
            formRef.current?.resetFields()
        }
    })
    const onFinish = (values: any) => {
        values.desc.then((res:any)=>{
            console.log(res);
            addData.run(values.title,values.type,values.content,res[0].response.path)
            
        })
    };

    const onReset = () => {
        formRef.current?.resetFields();
    };

    const onFill = () => {
        formRef.current?.setFieldsValue({ note: 'Hello world!', gender: 'male' });
    };
    const normFile = async(e: any) => {
        if (Array.isArray(e)) {
            return e;
        }
        return e?.fileList;
    };
    return (
        <Form
            {...layout}
            ref={formRef}
            name="control-ref"
            onFinish={onFinish}
            style={{ maxWidth: 600 }}
        >
            <Form.Item name="title" label="公告标题" rules={[{ required: true }]}>
                <Input />
            </Form.Item>
            <Form.Item name="type" label="公告类型r" rules={[{ required: true }]}>
                <Select
                    placeholder="选择类型"
                    allowClear
                >
                    {
                        datas.map(item=>(
                         <Option value={item.value}>{item.label}</Option>
                        ))
                    }

                </Select>
            </Form.Item>
            <Form.Item
                noStyle
                shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
            >
                {({ getFieldValue }) =>
                    getFieldValue('gender') === 'other' ? (
                        <Form.Item name="desc" label="Customize Gender" rules={[{ required: true }]}>
                            <Input />
                        </Form.Item>
                    ) : null
                }
            </Form.Item>
            <Form.Item label="content" name='content'>
                <TextArea rows={4} />
            </Form.Item>
            <Form.Item label="图片选择" name="desc" getValueFromEvent={normFile}>
                <Upload action={baseURL +'/pro/uplodafile'} listType="picture-card" maxCount={1}>
                    <div>
                        <PlusOutlined />
                        <div style={{ marginTop: 8 }}>Upload</div>
                    </div>
                </Upload>
            </Form.Item>
            <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">
                    Submit
                </Button>
                <Button htmlType="button" onClick={onReset}>
                    Reset
                </Button>
            </Form.Item>
        </Form>
    );

}

export default AnnoAdd
